<template>
  <view class="personal-info-container">
    <uni-nav-bar 
      left-icon="back" 
      title="个人信息" 
      @clickLeft="goBack"
      statusBar="true"
      fixed="true"
      color="#ffffff"
      backgroundColor="#ffc200"
    ></uni-nav-bar>

    <view class="info-content">
      <view class="avatar-section" @click="chooseAvatar">
        <button 
          open-type="chooseAvatar" 
          @chooseavatar="onChooseAvatar" 
          class="avatar-button"
        >
          <image 
            :src="avatarUrl" 
            class="avatar"
            mode="aspectFill"
          ></image>
        </button>
        <text class="nickname">{{ nickName }}</text>
        <text class="tip">点击更换头像</text>
      </view>

      <view class="info-list">
        <view class="info-item" @click="showManualInfoInput('nickName')">
          <text class="label">昵称</text>
          <view class="value-container">
            <text class="value">{{ nickName }}</text>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>
        <view class="info-item" @click="showManualInfoInput('phoneNumber')">
          <text class="label">手机号</text>
          <view class="value-container">
            <text class="value">{{ phoneNumber || '暂未绑定' }}</text>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>
        <view class="info-item" @click="editGender">
          <text class="label">性别</text>
          <view class="value-container">
            <text class="value">
              {{ 
                gender === 1 ? '男' : 
                gender === 2 ? '女' : 
                '未知' 
              }}
            </text>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 手动输入弹窗 -->
    <uni-popup ref="manualInfoPopup" type="dialog">
      <view class="manual-info-popup">
        <view class="popup-title">{{ popupTitle }}</view>
        <view class="popup-content">
          <view class="input-item">
            <text class="label">{{ inputLabel }}</text>
            <input 
              class="input" 
              :type="inputType" 
              :placeholder="inputPlaceholder"
              v-model="tempInputValue"
              :maxlength="inputMaxLength"
            />
          </view>
        </view>
        <view class="popup-buttons">
          <button 
            class="cancel-btn" 
            @click="cancelManualInput"
          >
            取消
          </button>
          <button 
            class="confirm-btn" 
            @click="confirmManualInput"
          >
            保存
          </button>
        </view>
      </view>
    </uni-popup>

    <!-- 性别选择弹窗 -->
    <uni-popup ref="genderPopup" type="bottom">
      <view class="gender-popup">
        <view class="gender-option" @click="selectGender(1)">男</view>
        <view class="gender-option" @click="selectGender(2)">女</view>
        <view class="gender-option" @click="selectGender(0)">保密</view>
        <view class="gender-cancel" @click="cancelGender">取消</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      avatarUrl: '../../static/btn_waiter_sel.png',
      nickName: '未登录',
      phoneNumber: '暂未绑定',
      gender: 0,
      
      // 手动输入相关
      currentInputType: '',
      tempInputValue: '',
      popupTitle: '',
      inputLabel: '',
      inputType: 'text',
      inputPlaceholder: '',
      inputMaxLength: 11
    }
  },
  onLoad() {
    // 从本地存储或Vuex获取用户信息
    const userInfo = uni.getStorageSync('userInfo') || {}
    this.updateUserInfo(userInfo)
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    
    // 显示手动输入弹窗
    showManualInfoInput(type) {
      this.currentInputType = type
      
      // 根据不同类型设置弹窗参数
      switch(type) {
        case 'nickName':
          this.popupTitle = '修改昵称'
          this.inputLabel = '昵称'
          this.inputType = 'text'
          this.inputPlaceholder = '请输入新昵称'
          this.tempInputValue = this.nickName === '未登录' ? '' : this.nickName
          this.inputMaxLength = 10
          break
        case 'phoneNumber':
          this.popupTitle = '修改手机号'
          this.inputLabel = '手机号'
          this.inputType = 'number'
          this.inputPlaceholder = '请输入手机号'
          this.tempInputValue = this.phoneNumber === '暂未绑定' ? '' : this.phoneNumber
          this.inputMaxLength = 11
          break
      }
      
      // 打开弹窗
      this.$refs.manualInfoPopup.open()
    },

    // 取消手动输入
    cancelManualInput() {
      this.$refs.manualInfoPopup.close()
    },

    // 确认手动输入
    confirmManualInput() {
      // 验证输入
      if (!this.tempInputValue) {
        uni.showToast({
          title: `${this.inputLabel}不能为空`,
          icon: 'none'
        })
        return
      }

      // 特殊验证：手机号
      if (this.currentInputType === 'phoneNumber') {
        const phoneReg = /^1[3-9]\d{9}$/
        if (!phoneReg.test(this.tempInputValue)) {
          uni.showToast({
            title: '请输入正确的手机号',
            icon: 'none'
          })
          return
        }
      }

      // 更新对应字段
      this[this.currentInputType] = this.tempInputValue

      // 保存用户信息
      this.saveUserInfo()

      // 关闭弹窗
      this.$refs.manualInfoPopup.close()

      // 提示成功
      uni.showToast({
        title: '信息保存成功',
        icon: 'success'
      })
    },

    // 选择头像
    chooseAvatar() {
      // 兼容性检查
      if (!wx.chooseMedia) {
        uni.showToast({
          title: '当前微信版本不支持',
          icon: 'none'
        })
        return
      }
    },

    // 处理头像选择
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail
      
      // 更新头像
      this.avatarUrl = avatarUrl
      
      // 保存用户信息
      this.saveUserInfo()
      
      // 显示成功提示
      uni.showToast({
        title: '头像更新成功',
        icon: 'success'
      })
    },

    // 编辑性别
    editGender() {
      this.$refs.genderPopup.open()
    },

    // 选择性别
    selectGender(gender) {
      this.gender = gender
      this.saveUserInfo()
      this.$refs.genderPopup.close()
    },

    // 取消性别选择
    cancelGender() {
      this.$refs.genderPopup.close()
    },

    // 更新用户信息
    updateUserInfo(userInfo) {
      this.avatarUrl = userInfo.avatarUrl || this.avatarUrl
      this.nickName = userInfo.nickName || this.nickName
      this.phoneNumber = userInfo.phoneNumber || this.phoneNumber
      this.gender = userInfo.gender || this.gender
    },

    // 保存用户信息
    saveUserInfo() {
      const userInfo = {
        avatarUrl: this.avatarUrl,
        nickName: this.nickName,
        phoneNumber: this.phoneNumber,
        gender: this.gender
      }
      
      // 保存到本地存储
      uni.setStorageSync('userInfo', userInfo)
    }
  }
}
</script>

<style lang="scss" scoped>
.personal-info-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-top: 44px;
}

.avatar-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  padding: 40rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;

  .avatar-button {
    background: none;
    padding: 0;
    margin: 0;
    border: none;
  }

  .avatar {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    margin-bottom: 20rpx;
  }

  .nickname {
    font-size: 36rpx;
    font-weight: bold;
  }

  .tip {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    color: #666;
    font-size: 24rpx;
  }
}

.info-list {
  background-color: white;
  border-radius: 10rpx;

  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    border-bottom: 1px solid #f0f0f0;

    .label {
      color: #666;
    }

    .value-container {
      display: flex;
      align-items: center;
      color: #333;
      font-weight: bold;
    }

    .value {
      margin-right: 10rpx;
    }
  }
}

.gender-popup {
  background-color: white;
  border-radius: 20rpx 20rpx 0 0;

  .gender-option {
    text-align: center;
    padding: 20rpx;
    border-bottom: 1px solid #f0f0f0;
  }

  .gender-cancel {
    text-align: center;
    padding: 20rpx;
    color: red;
  }
}

.manual-info-popup {
  background-color: white;
  border-radius: 20rpx;
  padding: 30rpx;
  width: 80%;
  margin: 0 auto;

  .popup-title {
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
    color: #333;
  }

  .popup-content {
    .input-item {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      border-bottom: 1px solid #f0f0f0;

      .label {
        width: 100rpx;
        color: #666;
        font-size: 28rpx;
      }

      .input {
        flex: 1;
        padding: 10rpx;
        font-size: 28rpx;
      }
    }
  }

  .popup-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;

    button {
      width: 45%;
      font-size: 28rpx;
    }

    .cancel-btn {
      background-color: #f0f0f0;
      color: #666;
    }

    .confirm-btn {
      background-color: #ffc200;
      color: white;
    }
  }
}
</style>